<template>
  <div class="login-index">
    <div class="login-index-content">
      <div class="header">
        <img
          class="logo"
          src="@/assets/logo.jpeg"
          alt="房资深"
        >
      </div>
      <div class="account-form">
        <h2>注册</h2>
      </div>
      <div class="account-form">
        <input
          type="text"
          v-model="phone"
          placeholder="请输入手机号码"
        >
      </div>
      <div class="account-form validation">
        <input
          type="text"
          v-model="captcha"
          placeholder="请输入验证码"
        >
        <span @click="getCaptcha">{{loading?time:tips}}</span>
      </div>
      <div
        class="account-form"
        v-show="captcha"
      >
        <input
          type="password"
          v-model="password"
          placeholder="请输入密码"
        >
      </div>
      <div
        class="account-form"
        v-show="captcha"
      >
        <input
          type="text"
          v-model="nickname"
          placeholder="请输入昵称"
        >
      </div>
      <div class="account-form">
        <button
          type="button"
          @click="confirm"
          :disabled="canConfirm"
        >注册</button>
        <p @click="goLogin">返回登录</p>
      </div>
    </div>
  </div>
</template>

<script>
import { validatePhone } from "@/utils/validation";
import { Notify } from "vant";
import { getSMS } from '@/api/comment';
export default {
  data() {
    return {
      phone: "",
      captcha: "",
      loading: false,
      tips: '获取验证码',
      time: 60,
      password: "",
      nickname: "",
      canConfirm: "disabled"
    };
  },
  methods: {
    async getCaptcha() {
      if (this.loading) {
        return;
      }
      if (!validatePhone(this.phone)) {
        Notify({
          message: "请输入正确的手机号码",
          background: "#fa1919",
          duration: 1 * 1000
        });
      } else {
        await getSMS({phone: this.phone, sms_type: 2})
        Notify({
          message: "发送成功",
          background: "#00AD1C",
          duration: 1 * 1000
        })
        this.loading = true;
        this.tips = '重新获取'
        let s = setInterval(() => {
          this.time--;
          if (this.time < 1) {
            window.clearInterval(s);
            this.loading = false;
            this.time = 60;
          }
        }, 1000);
      }
    },
    async confirm() {
      this.canConfirm = 'disbaled'
      const reForm = {
        phone: this.phone,
        captcha: this.captcha,
        password: this.password,
        nickname: this.nickname,
      }
      this.$store.dispatch('user/register', reForm)
      this.$router.push('/home')
    },
    goLogin() {
      this.$router.push('/login')
    },
    validateForm() {
      if (
        validatePhone(this.phone) &&
        this.captcha &&
        this.captcha &&
        this.password &&
        this.nickname
      ) {
        if (this.canConfirm === "disabled") {
          this.canConfirm = false;
        }
      } else {
        if (!this.canConfirm) {
          this.canConfirm = "disabled";
        }
      }
    }
  },
  watch: {
    phone() {
      this.validateForm();
    },
    captcha() {
      this.validateForm();
    },
    password() {
      this.validateForm();
    },
    nickname() {
      this.validateForm();
    }
  }
};
</script>

<style lang="less" scoped>
@import url('../style.less');
</style>
